<script lang="ts" setup>
// vueRouter
import { useRouter } from "vue-router";
// 方法
import { emitter } from "@/utils/mitt"; // 组件通讯

// Store
import { useCanvasStoreHook } from "@/stores/modules/canvas";

// 方法
import { handleNewCanvas } from "@/views/associationAnalysis/canvas/components/actionBar/index"; // 新增画布

import { ElMessageBox } from "element-plus";

import { graph } from "@/views/associationAnalysis/canvas/components/canvasG6/common/index";

const useCanvasStore = useCanvasStoreHook();
const canvas = computed(() => useCanvasStore.canvas); // 画布集合,遍历渲染标签页
const active = computed(() => useCanvasStore.active); // 当前打开的画布Uuid

const undoStack = ref(null); // 后退栈
const redoStack = ref(null); // 前进栈

onMounted(() => {
  nextTick(() => {
    // console.log(graph, "graph", graph.getUndoStack(), graph.getRedoStack());

    graph.on("stackchange", (e) => {
      // 撤销/重做栈发生变化时
      // console.log(e, "e");
      undoStack.value = e.undoStack.linkedList;
      redoStack.value = e.redoStack.linkedList;
    });
  });
});

// 关闭当前画布标签页
const handleClose = (index: number) => {
  // console.log(canvas, canvas.value.length);
  let graphIsEdit = sessionStorage.getItem("graphIsEdit"); // 标记是否有未保存的数据

  if (undoStack.value?.head || graphIsEdit) {
    // *** 此处必须要加延迟执行、不加的话点击浏览器按钮时会存在问题，弹框一闪而过，
    // 页面没有变，但是地址已经变了
    setTimeout(() => {
      ElMessageBox({
        title: "提示",
        message: `
            <div style="min-height: 50px; line-height: 22px;">
            <i class="el-icon-warning" style="color: rgb(90, 164, 255); font-size: 20px; vertical-align: middle;"></i>
            <span style="color: rgb(48, 49, 51);">您在画布中编辑了未保存，是否确认离开</span>
          </div>
          `,
        showCancelButton: true,
        dangerouslyUseHTMLString: true,
        // type: 'warning',
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(async () => {
          // 正常操作
          sessionStorage.removeItem("graphIsEdit"); // 标记是否有未保存的数据
          canvas.value.length > 1 ? "" : handleBack();
          useCanvasStore.closeCanvas(index);
        })
        .catch(() => {
          // 如果取消不做操作
        });
    }, 100);
  } else {
    sessionStorage.removeItem("graphIsEdit"); // 标记是否有未保存的数据
    canvas.value.length > 1 ? "" : handleBack();
    useCanvasStore.closeCanvas(index);
  }
};

// 切换画布标签页
const handleChangeCanvas = (id: string) => {
  let graphIsEdit = sessionStorage.getItem("graphIsEdit"); // 标记是否有未保存的数据
  if (undoStack.value?.head || graphIsEdit) {
    // *** 此处必须要加延迟执行、不加的话点击浏览器按钮时会存在问题，弹框一闪而过，
    // 页面没有变，但是地址已经变了
    setTimeout(() => {
      ElMessageBox({
        title: "提示",
        message: `
            <div style="min-height: 50px; line-height: 22px;">
            <i class="el-icon-warning" style="color: rgb(90, 164, 255); font-size: 20px; vertical-align: middle;"></i>
            <span style="color: rgb(48, 49, 51);">您在画布中编辑了未保存，是否确认离开</span>
          </div>
          `,
        showCancelButton: true,
        dangerouslyUseHTMLString: true,
        // type: 'warning',
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(async () => {
          // 正常操作
          sessionStorage.removeItem("graphIsEdit"); // 标记是否有未保存的数据
          useCanvasStore.openCanvas(id);
        })
        .catch(() => {
          // 如果取消不做操作
        });
    }, 100);
  } else {
    sessionStorage.removeItem("graphIsEdit"); // 标记是否有未保存的数据
    useCanvasStore.openCanvas(id);
  }
};

const router = useRouter();
// 返回文件管理页面
const handleBack = () => {
  sessionStorage.removeItem("graphIsEdit"); // 标记是否有未保存的数据
  router.push("/associationAnalysis/index");
};
</script>

<template>
  <ul class="tabs">
    <li class="justify-center back isOpen" @click="handleBack">
      <i class="iconfont icon_list text-[#7F8A9B]"></i>
    </li>
    <div class="tag-div">
      <li
        v-for="(item, index) in canvas"
        :key="index"
        :class="active === item.uuid ? 'isOpen' : ''"
        class="tag"
        @click="handleChangeCanvas(item.uuid)"
      >
        <i class="iconfont icon_file_fill text-[#3A72DE]"></i>
        <p class="mx-2 title">{{ item.name }}</p>
        <i class="iconfont icon_close" @click.stop="handleClose(index)"></i>
      </li>
    </div>
    <span
      class="h-full flex items-center justify-center ml-4 cursor-pointer"
      @click="handleNewCanvas"
    >
      <i class="iconfont icon_input_add text-[#222222]"></i>
    </span>
  </ul>
</template>

<style lang="scss" scoped>
.tabs {
  display: flex;
  width: 100%;
  height: 48px;

  .tag-div {
    display: flex;
    max-width: 90%;
    overflow: auto;
  }

  .tag-div::-webkit-scrollbar {
    width: 2px;
    height: 4px;
  }

  .tag-div::-webkit-scrollbar-thumb {
    background: rgb(201 198 198);
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
    opacity: 0.2;
  }

  .tag-div::-webkit-scrollbar-track {
    // background: red;
    border-radius: 0;
    box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
  }

  li {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 13px 8px;
    margin-left: 11px;
    cursor: pointer;
    border-radius: 11px 11px 0 0;
    box-shadow: 0 -2px 8px 0 rgb(13 22 50 / 10%);
    transition: all 0.3s;
  }

  .tag {
    flex-shrink: 0;
    width: 300px;

    .title {
      flex: 1;
      font-family: PingFangSC-Regular, "PingFang SC";
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      color: #222;
    }
  }

  .isOpen {
    background: #fff;
  }

  .back {
    padding: 16px;
  }
}
</style>
